<template>
    <div>
        <el-card class="box-card">
            <h1>分类管理</h1>
            <p style="margin-top: 20px; margin-bottom: 20px; float: right">
                <el-button type="primary" @click="isAdd=true" round class="el-icon-plus">增 加</el-button>
            </p>
            <el-table
                    :data="tableData">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="分类名称">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作">

                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="xiugai(scope.row)">
                            修改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    :page-count="count"
                    :page-size="pageSize"
                    :total="total"
                    background
                    layout="prev, pager, next"
                    style="float: right;margin:20px"
                    @current-change="pageChange"
                    >
            </el-pagination>
        </el-card>

        <el-dialog title="修改分类" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="分类编号" :label-width="formLabelWidth">
                    <el-input disabled v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="xiugaiok">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="增加分类" :visible.sync="isAdd">
            <el-form :model="form1">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="form1.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFenLei">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import http from '../util/http.js'
    export default {
        name: "Classification",
        data:function(){
            return {
                pageSize:10,
                total:10,
                count:19,
                tableData:[],
                dialogFormVisible:false,
                formLabelWidth:'100px',
                form:{
                    id:'',
                    name:''
                },
                isAdd:false,
                form1:{
                    name
                }
            }
        },
        mounted(){
            this.get(1);
        },
        methods:{
            get(v){
                http({
                    url:'/goodsType/list',
                    method:'get',
                    params:{
                        pageNo:v
                    }
                }).then((res)=>{
                    console.log('res',res);
                    this.tableData=res.data.data.list;
                    this.total=res.data.data.total,
                        this.count=res.data.data.pages;
                });
            },
            xiugai(val){
                this.dialogFormVisible=true;
                var json={
                    id:val.id,
                    name:val.name
                };
                this.form=json;
            },
            xiugaiok(){
                http({
                    url:'/goodsType/edit',
                    method:'post',
                    data:{
                        "id": this.form.id,
                        "name": this.form.name
                    }
                }).then((res)=>{
                    window.location.reload();
                    this.dialogFormVisible=false;
                });

            },
            addFenLei(){
                http({
                    url:'/goodsType/add',
                    method:'post',
                    data:{
                        "name": this.form1.name
                    }
                }).then((res)=>{
                    console.log(res);
                    window.location.reload();
                    this.isAdd=false;
                });
            },
            pageChange(n){
                this.get(n)
            }
        }
    }
</script>

<style scoped>

</style>